<template>
    <view class="flex" :style="{ 'padding': type != '1' ? '10rpx 20rpx' : '10rpx' }">
        <view>
            <image class="goods-image" :src="scope.goodsPicUrl" v-if="!!scope.goodsPicUrl" @tap="previewImage" lazy-load
                mode="scaleToFill"></image>
            <image v-else class="goods-image" src="../../../../static/img/110.png"></image>
            <view style="font-size: 28rpx;padding-left: 10rpx;" class="co-8e" v-if="type == '1'">系数: <text
                    class='co-00 bold'>{{ scope.unitTransRate || '-' }}</text></view>
        </view>
        <view style="margin-left: 11rpx;font-size: 28rpx;line-height: 40rpx;flex:1;">
            <view class="co-00 bold text-elips" style="font-size:32rpx;line-height: 45rpx;">{{ scope.goodsName }}
            </view>
            <view v-if="type == '1'" style="margin: 2px 0">
                <view><text class="co-8e">编码: </text><text class="bold">{{ scope.goodsCode
                        }}</text></view>
                <view><text class="co-8e">条码: </text><text class="bold">{{ scope.goodsBarcode
                        }}</text></view>
            </view>
            <view class="flex" style="margin: 2px 0" v-else>
                <view style="flex:2"><text class="co-8e">编码: </text><text class="bold">{{ scope.goodsCode
                        }}</text></view>
                <view style="flex:3"><text class="co-8e">条码: </text><text class="bold">{{ scope.goodsBarcode
                        }}</text></view>
            </view>
            <view class="co-8e" style="margin: 2px 0">规格: <text class='co-00 bold'>{{ scope.spec || '-' }}</text></view>
            <view class="co-8e" v-if="type != '1'" style="margin: 2px 0">转换系数: <text class='co-00 bold'>{{
                scope.unitTransRate || '-' }}</text></view>
            <view class="co-8e" v-if="type == '4'" style="margin: 2px 0">线下价格: <text class='co-00 bold'>{{
                formatPrice(scope.offlineStorePrice) || '-' }}</text></view>
            <view class="co-8e" v-if="type == '2'" style="margin: 2px 0">售卖状态: <text class='co-00 bold'>{{ saleStatusText
                    || '-' }}</text></view>
            <view class="co-8e" v-if="type == '3'" style="margin: 2px 0">线下库存: <text class='co-00 bold'>{{
                scope.offlineStock || '-' }}</text><text style="color:#5481FF;margin-left: 10rpx" @click="getLog"
                    v-show="showLog">查看同步日志</text></view>

            <view class="co-8e" v-if="type == '5'" style="margin: 2px 0">中台库存: <text class='co-00 bold'>{{ scope.stock ||
                    '-' }}</text></view>
            <view class="co-8e" v-if="type == '3' || type == '5'" style="margin: 2px 0">缺货状态: <text class='co-00 bold'>{{
                    stockoutStatusText || '-' }}</text></view>
            <view class="co-8e" v-if="type == '4'" style="margin: 2px 0">售卖状态: <text class='co-00 bold'>{{
                    onlineSaleStatusText || '-' }}</text></view>
            <view class='flex' style="margin: 2px 0" v-if="type != '5'">
                <text class="co-8e">{{ type == '1' ? '渠道:' : '经营渠道:' }}</text>
                <view class='flex' style="margin-left: 8rpx;flex-wrap:wrap;flex:1"
                    v-if="formatShopGoodsPublishList?.length">
                    <view
                        :style="{ 'background': v?.shelvesStatus == '1' ? v?.color : '#979797', 'margin-right': '8rpx', 'margin-bottom': '6rpx' }"
                        class='chnlbox' v-for="v in formatShopGoodsPublishList">{{ v?.chnlName?.substring(0, 1) }}</view>
                </view>
                <view style="margin-left: 8rpx;" v-else>-</view>
            </view>
            <view v-if="type == '1'">
                <view>
                    <view class="flex align-center">
                        <eui-status type="success" title="接价格" v-if="scope.isReceivePrice == '1'" />
                        <eui-status type="error" title="停价格" v-else />
                        <view style="flex:1;margin-left: 10rpx;" class="flex align-center">
                            <image src="../../../../static/img/bcmIcons/usual.png" style="height: 30rpx; width: 30rpx">
                            </image>
                            <text class="bold">{{ scope?.specMode == '2' ? (!!scope.storePriceText ?
                                formatSkuPrice(scope.storePriceText) : '-') : formatPrice(scope.storePrice)}}</text>
                        </view>
                    </view>
                    <view style="margin-left: 95rpx" class="flex align-center">
                        <image src="../../../../static/img/bcmIcons/vip.png" style="height: 30rpx; width: 30rpx">
                        </image>
                        <text class="bold" style="flex: 1">{{ scope?.specMode == '2' ? (!!scope.memberPriceText ?
                            formatSkuPrice(scope.memberPriceText) : '-') : formatPrice(scope.memberPrice)}}</text>
                    </view>
                </view>
                <view class="flex align-center">
                    <eui-status type="success" title="接库存" v-if="scope.isReceiveStock == '1'" />
                    <eui-status type="error" title="停库存" v-else />
                    <view style="flex:1;margin-left: 10rpx;"><text class="bold">{{ (!!scope.stock || scope.stock == 0) ?
                            scope.stock : '-' }}</text></view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { formatPrice, formatSkuPrice } from '../../../../hooks/bcmUseUntils';
export default {
    name: "GoodsItem",
    props: {
        type: {
            type: String,
            default: '1' // 1-列表item；2-上下架；3-改库存（单）；4-改价格（单）；5-库存日志；
        },
        scope: {
            type: Object,
            default: () => { }
        },
        chnlTypeList: {
            type: Array,
            default: () => []
        },
        onlineSaleStatusList: {
            type: Array,
            default: () => []
        },
        stockoutStatusList: {
            type: Array,
            default: () => []
        },
        showImage: {
            type: Boolean,
            default: true
        },
        showLog: {
            type: Boolean,
            default: true
        },
    },

    methods: {
        formatPrice,
        formatSkuPrice,
        previewImage(e) {
            const index = e.currentTarget.dataset.index;
            uni.previewImage({
                urls: [this.scope.goodsPicUrl],
                current: 0,
                // complete: () => {
                // 	uni.setStorageSync('ispreviewImage', true)
                // }
            });
        },
        getLog() {
            this.$emit('toLog', this.scope);
        }
    },
    computed: {
        formatShopGoodsPublishList() {
            let publishedShopGoodsList = [];
            this.chnlTypeList?.map(v => {
                let item = this.scope?.publishedShopGoodsList?.find(a => a.chnlType == v.value)
                if (!!item) {
                    publishedShopGoodsList.push({
                        ...item,
                        chnlName: v.text,
                        color: v.color
                    })
                }
            })
            return publishedShopGoodsList
        },
        saleStatusText() {
            return this.onlineSaleStatusList?.find(v => v.value == this.scope.onlineSaleStatus)?.text || this.scope.onlineSaleStatus;
        },
        stockoutStatusText() {
            return this.stockoutStatusList?.find(v => v.value == this.scope.stockoutStatus)?.text || this.scope.stockoutStatus;
        },
        onlineSaleStatusText() {
            return this.scope.onlineSaleStatus == '1' ? '正常' : this.scope.onlineSaleStatus == '0' ? '停售' : '-';
        },
    }
};
</script>

<style lang="scss" scoped>
@import "../../common/common.css";

.goods-image {
    width: 150rpx;
    height: 150rpx;
    border-radius: 4rpx;
}

.text-elips {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

::v-deep .m-list-view {
    padding: 0 6rpx !important;
}
</style>